<template>
 <view class="content-navbar-box " >
  <view class="content-navbar" 
  :style="{backgroundImage: `url(${getImg('detil_header.png')})`}" >
    <u-navbar  :titleStyle ="{color: navTitleColor}" :leftIconColor="navTitleColor" 
     
        :placeholder="true" :bgColor="navColor" :autoBack="true">
     <view slot="left" @click="handleBack">

      <u-icon  :name="isFirstPage?'home':'arrow-left'" :color="navTitleColor" size="24"></u-icon>
     </view>
     <view slot="center">
      {{scrollTop>=100?'投票':''}}
     </view>
    </u-navbar>
     <view class="u-m-t-26 u-m-l-12">
     <view class="content-navbar-lable1">欢迎您</view>
     <view class="content-navbar-lable1 u-m-t-4 u-font-32">参加{{voteTitle}}</view>
    </view>
    <view class="notice-card1  u-m-l-12">
       <!-- <u-parse :content="voteContent"></u-parse> -->
       <view class="notice-content" :class="{ 'expanded': isExpanded }" ref="noticeContent">
         <view class="text-clamp2" ref="clampedText">{{remark}}</view>
         <view class="full-text" ref="fullText">{{remark}}</view>
         <span v-if="showExpandButton" class="expand-button" @click.stop="showFullContent">
           展示
         </span>
         
         <!-- 黑色气泡 -->
         <view v-if="showBubble" class="content-bubble" @click="hideBubble">
           <view class="bubble-content">
             <view class="bubble-text">{{remark}}</view>
           </view>
         </view>
       </view>
    </view>
    <view class="u-m-t-14 u-flex u-m-l-12" >
      <view class="content-navbar-but"  @click="handleClick({name:'投票说明'})">
        <view>投票说明</view>
        <u-icon name="arrow-right" color="#3B75FA" size="15"></u-icon>
      </view>
      <view class="content-navbar-but u-m-l-12"  @click="handleClick({name:'投票检验'})">
        <view>存证结果</view>
        <u-icon name="arrow-right" color="#3B75FA" size="15"></u-icon>
      </view>
    </view>
     <!-- <view class="content-navbar-lable">{{voteTitle}}</view> -->
      <!--  <view class="content-navbar-buttons">
       <view @click="handleClick(item)" class="content-navbar-buttons-item" v-for="(item,index) in buttons" :key="index">
            <u-image :src="item.icon" width="62rpx" height="62rpx" style="margin-right: 10rpx;"></u-image>
            <text class="u-m-l-40" >{{item.name}}</text>
            <view class="content-navbar-buttons-item-icon">
                <u-icon v-if="item.isArrow" name="arrow-right" color="#B7C4D2" size="15"></u-icon>
            </view>
            
        </view>
      </view> -->
  </view>
</view>
</template>

<script>
import votion_form_headr_left_button from '@/static/votion_form_headr_left_button.svg'
import votion_form_headr_right_button from '@/static/votion_form_headr_right_button.svg'
import ls from '@/util/ls.js'
export default {
  name: "Head",
  props: {
    scrollTop: {
      type: Number,
      default: 0
    },
    voteTitle: {
      type: String,
      default: ''
    },
    voteContent: {
      type: String,
      default: ''
    },
    VotingratioInfo: {
      type: Object,
      default: () => {}
    },
    recordId: {
      type: Number,
      default: 0
    },
    communityId: {
      type: Number,
      default: 0
    },
    voteId: {
      type: Number,
      default: 0
    },
    isFirstPage: {
      type: Boolean,
      default: false
    },
    isVotingInfo: {
      deep:true,
      immediate:true,
      type: Object,
      default: () => {}
    },
    remark: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
        buttons:[
            {
                name:'投票说明',
                icon:votion_form_headr_left_button,
                isArrow:false
                
            },
            {
                name:"投票检验",
                icon:votion_form_headr_right_button,
                isArrow:true
            }
            
        ],
        isExpanded: false,
        showExpandButton: false,
        showBubble: false // 新增：控制黑色气泡的显示
    }
  },
  computed: {
    navColor() {
 
    //  return "#ffffff"
       return this.scrollTop === 0 ? 'rgba(0,0,0,0)' : `rgba(255,255,255,${this.scrollTop/100})`
     //  return 'rgba(0,0,0,0)'
    },
    navTitleColor() {

    //  return this.scrollTop === 0 ? '#ffffff' : '#333333';
       return "#333333"
    }
  },
  watch:{
    scrollTop(newVal){
      
    },
    remark: {
      handler() {
        this.$nextTick(() => {
          this.checkContentHeight()
        })
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.checkContentHeight()
    })
  },
  methods:{
    handleCloseClick(){
      console.log("我触发了关闭",this.showBubble)
      if(this.showBubble){
        this.showBubble = false
      }
    },
    handleBack(){
      if(this.isFirstPage){
        uni.switchTab({
          url:`/pages/home/index?communityId=${this.communityId}`
        })
      }else{
        uni.navigateBack()
      }
    },
    async handleClick(item){
     
      let res=await this.$store.dispatch("community/checkLoginAndBoundHouses")
     
     if(!res) return
      if(item.name=="投票说明"){
        ls.set("voteContent",this.voteContent)
        uni.navigateTo({
          url:`/pages/votingIns/index?voteId=${this.voteId}&sumTotalPerson=${this.VotingratioInfo.sumTotalPerson}&sumTotalSize=${this.VotingratioInfo.sumTotalSize}`
        })
      }else if(item.name=="投票检验"){
    
        if(!this.isVotingInfo.isVoting){
          uni.showToast({
            title:"您还未投票，不能进行投票检验",
            icon:"none"
          })
          return
        }
        uni.navigateTo({
          url:`/pages/certificate/index?title=存证结果&recordId=${this.recordId}&communityId=${this.communityId}`
        })
      }
    },
    checkContentHeight() {
      this.$nextTick(() => {
        setTimeout(() => {
          const query = uni.createSelectorQuery().in(this)
          query.selectAll('.text-clamp2, .full-text').boundingClientRect(data => {
            if (data && data.length >= 2) {
              const clampedHeight = data[0].height // 截断文本的高度
              const fullHeight = data[1].height // 完整文本的高度
              console.log('截断文本高度:', clampedHeight, '完整文本高度:', fullHeight)
              
              // 如果截断文本高度小于完整文本高度，说明文本超过2行
              this.showExpandButton = clampedHeight < fullHeight
              console.log('是否显示按钮:', this.showExpandButton)
            }
          }).exec()
        }, 100) // 延迟100ms确保DOM渲染完成
      })
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
    showFullContent() {
      this.showBubble = true;
    },
    hideBubble() {
      console.log('关闭气泡')
      this.showBubble = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.content-navbar-box{
    width: 100%;
}
.content-navbar {
  width: 100%;
  padding: 0 30rpx 0rpx 30rpx;
  background-size: cover;
  height: 486rpx;

    &-lable{
       font-weight: 550;
        font-size: 36rpx;
        color: #FFFFFF; 
        margin:16rpx 0 30rpx 0;
        padding:0 4rpx
    }
    &-buttons{
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-item{
            padding: 0 30rpx;
            width: 337rpx;
            height: 100rpx;
            background: linear-gradient( 360deg, #FFFFFF 0%, #E3F0FD 100%);
            box-shadow: inset 0rpx 2rpx 0rpx 0rpx #FFFFFF;
            border-radius: 18rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-weight: 400;
            font-size: 30rpx;
            color: #333333;
            text-align: center;
            &-icon{
                margin-left: 5rpx;
                position: relative;
                top: 3rpx;
            }
        }
    }
  
}

.content-navbar-lable1{
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  font-weight: bold;
  font-size: 44rpx;
  color: #3B75FA;
 
}
.notice-card1{
  margin-top: 18rpx;
  position: relative;
}

.notice-content {
  font-size: 26rpx;
  line-height: 40rpx;
  color: #333;
  position: relative;
  width: 50%; /* 设置宽度为50% */
  
  &.expanded {
    .text-clamp2 {
      display: none;
    }
    .full-text {
      display: block;
    }
  }
}

.text-clamp2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
  word-break: break-all;
  position: relative;
}

.full-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  word-wrap: break-word;
  word-break: break-all;
  width: 50%; /* 确保宽度一致 */
}

.expand-button {
  position: absolute;
  right: -18px;
  bottom: 0;
  
  padding-left: 60rpx;
  font-size: 24rpx;
  color: #3B75FA;
  cursor: pointer;
  line-height: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.content-navbar-but{
  padding: 0 16rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  border: 1rpx solid #3B75FA;
  font-weight: 400;
  font-size: 28rpx;
  color: #3B75FA;
  text-align: center;
  line-height: 48rpx;
  display: flex;
  box-sizing: border-box;
}

.content-bubble {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10rpx;
  padding: 30rpx;
  z-index: 1000;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: flex-start;

  // max-height: 80%;
  overflow-y: auto;
  margin-top: 10rpx;
  width: 80vw;
}

.bubble-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;
  line-height: 1.5;
  word-break: break-all;
  width: 100%;
}

.bubble-text {
  flex-grow: 1;
  // text-align: center;
}

</style>
